<div class="wsl-list-item">
  <div class="wsl-item-heading">
    <div class="wsl-item-status">
      <fa-icon
        [icon]="icon.type"
        class="text-sky-600 dark:text-sky-800"></fa-icon>
    </div>
    <div class="wsl-item-title">
      <p>
        {{ data.fullname }}
        <span *ngIf="isSelf">(You)</span>
      </p>
    </div>
    <div class="text-xs leading-8 text-gray-500 dark:text-gray-400">
      {{ data.email }}
    </div>
  </div>
  <div class="wsl-item-topics">
    <div
      *ngIf="isTeamAdmin && !isSelf && data.role !== 'owner'"
      class="wsl-item-ctrl-box">
      <div title="Edit User Information" (click)="edit()" class="wsl-item-ctrl">
        <fa-icon icon="user-edit"></fa-icon>
      </div>
      <div
        title="Remove User from Team"
        (click)="remove()"
        class="wsl-item-ctrl">
        <fa-icon icon="user-minus"></fa-icon>
      </div>
    </div>
    <div class="wsl-item-topic">
      <span
        class="flex min-w-[5rem] items-center justify-center rounded-md border border-sky-200 bg-sky-100 px-1 text-sky-700 dark:border-sky-700 dark:bg-sky-900 dark:text-sky-200">
        {{ data.role }}
      </span>
    </div>
  </div>
</div>
